<template>
	<div>
		<show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"  @selectView="selectView"></show-view-path>
		<div style="height: 100%" :ref="config.key"></div>
	</div>
</template>

<script>
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';
import StaticDataFunc from "./static-data-func";

export default {
	name: "lineBar-view",
	mixins:[ChartPublic,ChartStyle,StaticDataFunc],
	data() {
		return {
		}
	},
	methods: {
		setOption(){
			//图例组件
			let legend = [];
			//直角坐标系 grid 中的 x 轴
			let xAxis = {};
			//yAxis直角坐标系 grid 中的 y 轴
			let yAxis = [];
			/**
			 *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
			 */
			let series = [];
			//静态数据模式
			if(this.config.dataSources.source=="static"){
				//第一Y轴
				let yAxis1=  {type: 'value',axisLine:{show:false}};
				if(this.config.styles){
					yAxis1['show'] = this.config.styles.yAxisShow
				}
				//修改y轴颜色
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis1,this.config.styles.yGrid)
				this.chartYlineStyle(yAxis1,this.config.styles.yAxisConfig,this.config.dataSources.measures2);
				yAxis.push(yAxis1);
				//第二Y轴
				let yAxis2=  {type: 'value',axisLine:{show:false}};
				//修改y轴样式风格
				//判断是否隐藏Y轴
				if(this.config.styles){
					yAxis2['show'] = this.config.styles.yAxisShow2
				}
				//修改y轴颜色
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis2,this.config.styles.yGrid)
				this.chartYlineStyle(yAxis2,this.config.styles.yAxisConfig2);
				yAxis.push(yAxis2);
				if(this.config.dataSources.staticData){
					//静态数据
					let staticData=JSON.parse(this.config.dataSources.staticData);
					for (let i = 0; i < staticData.series.length; i++) {
						if(staticData.series[i].name){
							legend.push(staticData.series[i].name);
						}
					}
					xAxis= {
						type: 'category',
						data: staticData.categories,
						show:this.config.styles.xAxisShow,
						axisLine: {
							show: true,
							lineStyle: {
								color:this.config.advancedConf.xAxisColor?this.config.advancedConf.xAxisColor:"#333"
							}
						},
					}
					//修改x轴颜色
					this.chartXlineStyle(xAxis);
                    series = this.initStaticSeries(staticData.series);
				}
			}else {
				//获取维度
				xAxis=this.getDimensions();
				//修改x轴颜色
				this.chartXlineStyle(xAxis)
				//获取度量
				let yAxis1={};
				this.calMeasures(this.config.dataSources.measures,legend,yAxis1,series,this.config.styles.yAxisShow2);
				yAxis.push(yAxis1);
				//第二y轴
				if(this.config.styles.yAxisShow2){
					let legend2=[];
					let yAxis2={};
					this.calMeasures(this.config.dataSources.measures2,legend2,yAxis2,series,true,1);
					yAxis.push(yAxis2);
					legend.push(...legend2);
				}
			}
            let dataZoom = [];
            if(this.config.styles.dataZoomShow && xAxis.data.length>this.config.styles.dataZoom.numeral){
                //X轴是否滚动
                dataZoom.push({
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: this.config.styles.dataZoom.start, // 初始范围的起始百分比
                    end: this.config.styles.dataZoom.end // 初始范围的结束百分比
                });
                if(this.config.styles.insideShow){
                    dataZoom.push({
                        type: 'inside',
                        start:this.config.styles.inside.start,
                        end: this.config.styles.inside.end
                    })
                }
            }
			this.option={
				tooltip:this.chartTooltip(),//提示框的样式修改
				grid:this.chartGrid(),//grid离容器的边距设置
				toolbox:this.chartToolbox(),//工具栏目配置
				color:this.getColors(),
				legend:this.chartLegend(legend),//图例,
				xAxis: xAxis,
				yAxis: yAxis,
				series: series,
                dataZoom:dataZoom
			};
		},
		calMeasures(measures,legend,yAxis,series,yAxisShow2,yAxisIndex){
			for (let i = 0; i < measures.length; i++) {
				let array=[];
				let measure = measures[i];
				//默认折线
				let chartType="line";
				if(measure.chartType){
					chartType=measure.chartType
				}
				//格式
				let formatter="{value}";
				legend.push(measure.fieldLabel);
				let color="";
				if(this.screenConfig.globalConfig.colors.length>0){
					color=this.screenConfig.globalConfig.colors[(i%this.screenConfig.globalConfig.colors.length)];
				}
				//修改y轴颜色
				yAxis=Object.assign(yAxis,{
					type: 'value',
					show:yAxisIndex?this.config.styles.yAxisShow2:this.config.styles.yAxisShow,
					axisLabel: {
						formatter: formatter
					}
				})
				//Y轴在grid区域中的分隔线
				this.splitLineStyle(yAxis,this.config.styles.yGrid)
				let yAxisConfig=yAxisIndex?this.config.styles.yAxisConfig2 :this.config.styles.yAxisConfig;
				this.chartYlineStyle(yAxis,yAxisConfig);
				let fieldName=measure.tableName?measure.tableName+'_'+measure.fieldName:measure.fieldName;
				for (let k = 0; k < this.data.length; k++) {
					let value= this.data[k][fieldName];
					if(value){
						array.push(value);
					}else {
						array.push(0);
					}
				}
				let obj={
					name: measure.fieldLabel,
					type:chartType,
					data:array,
				}
				if(chartType=='line'){
					obj=Object.assign(obj,{
						symbolSize:this.config.styles.lineConfig.size,
						symbol:this.config.styles.lineConfig.type,
						smooth:this.config.styles.lineConfig? this.config.styles.lineConfig.smoothCurve:false,//平滑曲线
						itemStyle:{
							normal: {
								lineStyle:{
									width:this.config.styles.lineConfig.width,
								}
							}
						}
					})
				}else {
					//柱形宽度
					if(this.config.styles.barConfig && this.config.styles.barConfig.barWidth ){
						if(this.config.styles.barConfig.widthSuffix =='px'){
							obj.barWidth=this.config.styles.barConfig.barWidth;
						}else {
							obj.barWidth=this.config.styles.barConfig.barWidth + '%';
						}
					}
					//柱状图圆角
					if(this.config.styles.barConfig && this.config.styles.barConfig.radius){
						let numberList = this.filletedCorner(this.config.styles.barConfig.radius)
						let  itemStyle = {
							normal:{
								barBorderRadius :numberList
							}
						}
                        obj['itemStyle']=itemStyle;
					}
					//是否展示顶部信息
					if(this.config.styles.barConfig && this.config.styles.barConfig.showData){
						obj.label={
							show: this.config.styles.barConfig.showData,
							position: 'top'
						};
					}
				}
				obj.yAxisIndex=yAxisIndex?yAxisIndex:0;
				//获取预警线数据和样式
				let markLine = {
					type: 'bar',
					silent: true, //基线显示 隐藏
					symbol: 'none', // 不显示箭头和圆点
					data:this.markLine(array),//获取属性样式
				}
				obj['markLine'] = markLine
				series.push(obj);
			}
		}
	},
	watch: {}
}
</script>

<style scoped>
</style>
